<template>
    <div class="box" :type="type" @click="playAudio">
        <img src="../assets/voice.png" alt="">
    </div>
</template>

<script>
//   var createPlayer = require('web-audio-player')
  var audioObj = {};
  export default {
      data:function(){
          return {
              linkss:this.audiopath
          }
      },
      props: ['audiopath','type','times'],
      created:function(){
        //   audioObj['audio'+this.times] = createPlayer(this.audiopath);

      },
      methods:{
          playAudio:function(){
              console.log(1);
              var audioss = document.createElement('audio');
              audioss.src = this.audiopath;
              audioss.play();

            // audioObj['audio'+this.times].on('load', () => {
            //     console.log('Audio1 loaded...')
            //     audioObj['audio'+this.times].play()
            //     audioObj['audio'+this.times].node.connect(audioObj['audio'+this.times].context.destination)
            // })
          }
      }

  };
</script>

<style lang="less" scoped>
    .box{
        &[type="1002"]{
            padding-right: 25px;
            img{
                margin:-5px;position: relative;top:2px;transform: rotate(180deg);
            }
        }
        &[type="1001"]{
            padding-left: 25px;
            img{
                margin:-5px;position: relative;top:2px;transform: rotate(-0deg)!important;
                filter:contrast(0%);
            }
        }
    }
</style>